<template>
    <div class="top-box">
        <div class="top-left">
            <div>成都市（彭州试点片区）地质灾害智慧分析管控平台</div>
            <!-- <div class="top-select">
                <el-select suffix-icon="CaretBottom" size="large" v-model="value" value-key="id">
                    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id" />
                </el-select>
            </div> -->
        </div>
        <div class="top-right">
            <div>{{ currentTime }}</div>
            <el-icon @click="hanldeLogout" class="logout" size="28px" color="#0bb8af">
                <SwitchButton />
            </el-icon>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
const store = useStore()
import { useRouter } from "vue-router";
const router = useRouter();

// 退出登录
const hanldeLogout = async () => {
    await store.dispatch('user/logout')
    router.push({ path: '/login' })
}

// top-下拉
const value = ref(1)
const options = ref([
    { id: 1, label: '无预警' },
    { id: 2, label: '三级预警' },
    { id: 3, label: '二级预警' },
    { id: 4, label: '一级预警' },
])

// 当前时间
let currentTime = ref('');
onMounted(() => {
    // 获取当前时间
    setInterval(() => {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        currentTime.value = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }, 1000);

});
</script>
<style lang="less" scoped>
.top-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #B5DBE8;
    padding: 20px 36px;
    box-sizing: border-box;
    border-bottom: 2px solid #0bb8af;
}

.top-left {
    font-size: 36px;
    display: flex;
    align-items: center;
}

.top-select {
    margin-left: 30px;
}

.top-right {
    display: flex;
    align-items: center;
    font-size: 20px;
}

.logout {
    cursor: pointer;
    margin-left: 20px;
}


:deep .el-input__wrapper {
    background: #0f2233 !important;
    border: 2px solid #0bb8af;
    box-shadow: none;
    border-radius: 0;
    width: 150px;
}

:deep .el-input__inner {
    color: white !important;
    font-size: 16px;
}
</style>